<template>
	<view :class="['unAuthen',device == 'ios'?'iosPadding':'androidPadding']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title">身份认证</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="card">
			<view class="cardLine dFlex jBetween_aStart">
				<view class="desc dFlex flexDirection jCenter_aCenter">
					<view class="descImg imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/person/zhengmian@2x.png" mode="widthFix"></image>
					</view>
					<text>正确示例：文字清晰可见</text>
				</view>
				<view class="lineVal dFlex flexDirection jCenter_aCenter">
					<view class="valImg imgPublic" @tap='checkchoose(1)'>
						<image v-if="!image1" src="https://wx.gdxixiashi.com/public/images/person/paizhao@2x.png" mode="widthFix"></image>
						<image v-if="image1" :src="imgDomain + image1" mode="widthFix"></image>
					</view>
					<text>点击上传身份证正面照片</text>
				</view>
			</view>
			<view class="cardLine dFlex jBetween_aStart">
				<view class="desc dFlex flexDirection jCenter_aCenter">
					<view class="descImg imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/person/fanmian@2x.png" mode="widthFix"></image>
					</view>
					<text>正确示例：文字清晰可见</text>
				</view>
				<view class="lineVal dFlex flexDirection jCenter_aCenter">
					<view class="valImg imgPublic" @tap='checkchoose(2)'>
						<image v-if="!image2" src="https://wx.gdxixiashi.com/public/images/person/paizhao@2x.png" mode="widthFix"></image>
						<image v-if="image2" :src="imgDomain + image2" mode="widthFix"></image>
					</view>
					<text>点击上传身份证反面照片</text>
				</view>
			</view>
			<view class="cardLine dFlex jBetween_aStart">
				<view class="desc dFlex flexDirection jCenter_aCenter">
					<view class="descImg imgPublic">
						<image src="https://wx.gdxixiashi.com/public/images/person/shouchi@2x.png" mode="widthFix"></image>
					</view>
					<text>正确示例：全脸无遮挡</text>
				</view>
				<view class="lineVal dFlex flexDirection jCenter_aCenter">
					<view class="valImg imgPublic" @tap='checkchoose(3)'>
						<image v-if="!image3" src="https://wx.gdxixiashi.com/public/images/person/paizhao@2x.png" mode="widthFix"></image>
						<image v-if="image3" :src="imgDomain + image3" mode="widthFix"></image>
					</view>
					<text>点击上传手持身份证照片</text>
				</view>
			</view>
		</view>
		<view class="explain">
			<view class='title'>身份证照片要求：</view>
			<view class="txt">必须本人的有效身份证，与基本信息一致照片确保身份证边框完整，字体清晰，亮度均匀照片要求5M以内，支持 jpg / jpeg / png 格式</view>
		</view>
		<view :class="['btns',btnFlag?'':'hui']" @tap='subMsg'>确定提交</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgDomain:getApp().globalData.imgDomain,
				btnFlag:false,
				device:getApp().globalData.platform,
				image1:'',//正面
				image2:'',//反面
				image3:'',//手持
				showPermission:false,
			};
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			checkchoose(idx){
				// #ifdef APP-PLUS
				if(!uni.getStorageSync('is_upload')){
					uni.showModal({
						title:'权限申请说明',
						content:'本次申请使用您的相机和存储权限用于上传身份证照片，是否同意',
						success:(op)=>{
							if(op.confirm){
								this.chooseImage(idx)
							}
						},
					})
				}else{
					this.chooseImage(idx)
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				this.chooseImage(idx)
				// #endif
			},
			// 选择张片
			chooseImage(idx){
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].tempFilePath).then(res=>{
								console.log(res);
								if(res){
									if(idx == '1'){
										this.image1 = res.image_path;
									}else if(idx == '2'){
										this.image2 = res.image_path;
									}else if(idx == '3'){
										this.image3 = res.image_path;
									}
									this.checkImg();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					},
				})
				// #endif
				// #ifdef APP-PLUS
				uni.chooseImage({
					count:1,
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						uni.setStorageSync('is_upload',1);
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].path).then(res=>{
								console.log(res);
								if(res){
									if(idx == '1'){
										this.image1 = res.image_path;
									}else if(idx == '2'){
										this.image2 = res.image_path;
									}else if(idx == '3'){
										this.image3 = res.image_path;
									}
									this.checkImg();
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					},
				})
				// #endif
			},
			// 提交审核
			subMsg(){
				if(this.image1 && this.image2 && this.image3){
					this.tool.getData('User/addcheck',{
						memberId:uni.getStorageSync('userId'),
						image1:this.image1,
						image2:this.image2,
						image3:this.image3,
					}).then(res=>{
						console.log(res);
						if(res){
							uni.redirectTo({
								url:'./authening'
							})
						}
					}).catch(err=>{
						console.log(err);
					})
				}else{
					uni.showToast({
						title:'请上传相关图片',
						icon:"none"
					})
				}
			},
			// 检查
			checkImg(){
				if(this.image1 && this.image2 && this.image3){
					this.btnFlag = true;
				}else{
					this.btnFlag = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.unAuthen{
		width: 100%;
		.btns{
			width: 95%;
			position: fixed;
			left: 2.5%;
			bottom: 2%;
			color: white;
			background: #0e64ff;
			border-radius: 5px;
			padding: 12px 0;
			text-align: center;
		}
		.hui{
			background: #BEBEBE;
		}
		.explain{
			width: 100%;
			padding: 0 5%;
			box-sizing: border-box;
			margin-top: 10px;
			.title{
				padding: 6px 0;
				border-bottom: 1px solid #DCDCDC;
				color: #646464;
				font-size: 15px;
				margin-bottom: 6px;
				font-weight: bold;
			} 
			.txt{
				color: #b0b0b0;
				font-size: 12px;
				line-height: 22px;
			}
		}
		.card{
			width: 100%;
			padding: 18px 5%;
			box-sizing: border-box;
			background: linear-gradient(to bottom,#0e64ff,#60a0f8);
			.cardLine{
				width: 100%;
				margin-bottom: 8px;
				.desc{
					width: 49%;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 5px;
					padding: 10px 0;
					color: white;
					font-size: 12px;
					.descImg{
						width: 76.8%;
						margin-bottom: 6px;
					}
				}
				.lineVal{
					width: 49%;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 5px;
					padding: 14px 0;
					color: white;
					font-size: 12px;
					.valImg{
						width: 76.8%;
						margin-bottom: 8px;
					}
				}
			}
			.cardLine:last-child{
				margin: 0;
			}
		}
	}
	.ios_pageTitle,.and_pageTitle{
		background: #0e64ff;
		color: white;
	}
</style>
